<template>
    <div class="classify">
        <div>
            <div class="classify-name">
                分类预览名称
            </div>
            <el-scrollbar max-height="calc(100vh - 280px)">
                <div :class="{ 'classify-list-item': true, active: active.categoryId == item.categoryId }"
                    v-for="item in classifyList" :key="item" @click="changeClassify(item)">
                    <el-tooltip :content="item.preview" placement="top-start">
                    {{ item.preview }}
                </el-tooltip>
                </div>
            </el-scrollbar>
        </div>
        <div>
            <div class="tabel-head">
                <div>属性标签</div>
                <div>是否筛选</div>
                <div>是否必填</div>
                <div>排序</div>
                <div>状态</div>
            </div>
            <div class="tabel-content">
                <div class="preview">{{ active.preview }}</div>
                <el-scrollbar max-height="calc(100vh - 340px)">
                    <slot></slot>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getCategoryTree } from "@/apis/manage";

const emit=defineEmits(["init",'update:loading']);

const active = ref({});
const classifyList = ref([])
const getClassify = async () => {
    const res = await getCategoryTree();
    const arr = [];
    const getChild = (tree) => {
        tree.forEach(item => {
            if (item.children.length) {
                getChild(item.children)
            } else {
                arr.push(item);
            }
        })
    }
    getChild(res.data);
    classifyList.value = arr;
    active.value = arr[0];
    emit('init',arr[0].categoryId)
}
const changeClassify = (item) => {
    active.value = item;
    emit('init', item.categoryId)
}
onMounted(() => {
    getClassify();
    emit('update:loading',true)
})
</script>

<style lang="scss" scoped>
@mixin gray {
    background: #F2F6FC;
    height: 50px;
    line-height: 50px;
}

$border: 1px solid #E1E6ED;

.classify {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 10px;
    height: calc(100vh - 240px);

    .el-scrollbar {
        height: unset;
    }

    >div:first-child {
        box-shadow: 0px 0px 8px 0px rgba(4, 19, 74, 0.1);
        min-width: 250px;
        .classify-list-item {
            height: 40px;
            line-height: 40px;
            padding:0 10px;
            user-select: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .active {
            background: #D9E8FF;
            color: #007DFF;
        }
        .classify-name {
            @include gray;
            padding-left: 10px;
        }
    }

    >div:last-child {
        .tabel-head {
            display: grid;
            grid-template-columns: repeat(5, 1fr);

            >div {
                @include gray;
                text-align: center;
            }
        }

        .tabel-content {
            border: $border;
            margin-top: 10px;
            height: calc(100vh - 290px);
        }

        .preview {
            @include gray;
            padding-left: 10px;
            border-bottom: $border
        }
    }
}
</style>